import { loginAPI } from '@/api/login';
import logoSrc from '@/assets/logo.png';
import { saveToken } from '@/utils/storage';
import { Button, Card, Form, Input, message } from 'antd';
import { useHistory } from 'react-router-dom';
import './index.scss';

export default function Login() {
  const history = useHistory();
  const handleFinish = async (values: any) => {
    const res: any = await loginAPI(values);
    if (res.success) {
      saveToken(res.data);
      message.success('登录成功', 1);
      history.push('/');
    } else {
      message.warning(res.message);
    }
  };
  return (
    <div className='login'>
      <Card className='login-container' bordered={false}>
        <img className='login-logo' src={logoSrc} alt='' />
        <Form
          onFinish={handleFinish}
          initialValues={{
            mobile: '13800000002',
            password: '123456',
          }}
        >
          <Form.Item
            name='mobile'
            rules={[
              {
                required: true,
                message: '手机号码不能为空',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入11位手机号码',
              },
            ]}
          >
            <Input placeholder='请输入11位手机号码' />
          </Form.Item>

          <Form.Item
            name='password'
            rules={[
              {
                required: true,
                message: '密码不能为空',
              },
              {
                pattern: /^\d{6}$/,
                message: '请输入6位密码',
              },
            ]}
          >
            <Input type='password' placeholder='请输入6位密码' />
          </Form.Item>

          <Form.Item>
            <Button block type='primary' htmlType='submit'>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
